<template>
	<view class="order">
		<view class="top" @click="showInfo()">
			<view class="left">
				<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
				<view class="store">单号:{{ orderInfo.sn }}</view>
			</view>
			<view class="right">{{orderInfo.state}}</view>
		</view>
		<view class="item" v-for="(item, index) in orderInfo.itemList" :key="index" @click="showInfo()">
			<view class="left" v-if="item.cover">
				<image :src="item.cover" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title u-line-2">{{ item.itemName }}</view>
				<view class="type">{{ item.itemType }}</view>
				<!-- <view class="delivery-time">添加时间:{{ item.addTime }}</view> -->
			</view>
			<view class="right">
				<view class="price">
					￥{{ item.price }}
				</view>
			</view>
		</view>
	    <view class="total u-flex">
			<view class="u-flex-1"><text class="u-font-12 text-gray u-m-r-30">{{ orderInfo.addTime }}</text>	</view>
			<view class="u-text-right u-flex-1">
				<text class="total-price">
					￥{{ orderInfo.orderMoney }}
				</text>
			</view>
		</view> 
		<view class="bottom">
			<!-- <view class="more">
				<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
			</view> -->
			<view class=" btn" v-if="orderInfo.state == '未支付'" @click="handleCancel()">取 消</view>
			<view class=" btn" v-if="orderInfo.state == '已评价' || orderInfo.state == '未支付'  || orderInfo.state == '已取消'" @click="handleDelete()">删 除</view>
			<view class=" btn" v-if="orderInfo.cancelAble" @click="handleRefund()">申请退款</view>
			<view class="evaluate btn" v-if="orderInfo.state == '已付款'" @click="evaluate()">评 价</view>
			<!-- <view class="exchange btn" v-if="orderInfo.state == '未支付'">重新付款</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: ['orderInfo'],
		data() {
			return {
			}
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val && val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val && val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			evaluate() {
				this.$emit('handleEvaluate', this.orderInfo.id)
			},
			handleCancel() {
				this.$common.showAlert("请确认", `确认取消订单？`, () => {
					this.$http.post(`sCenter/shop/orderCancel/${this.orderInfo.id}`, {}, res => {
						if (!this.$common.handleResponseMsg(res)) return;
						if (res.errCode == 0) {
							this.$common.showMsg(res.msg)
							this.$emit("afterCancel", this.orderInfo.id)
						}
					})
				})
			},
			handleDelete() {
				this.$common.showAlert("请确认", `确认删除订单？`, () => {
					this.$http.post(`sCenter/shop/orderDelete/${this.orderInfo.id}`, {}, res => {
						if (!this.$common.handleResponseMsg(res)) return;
						if (res.errCode == 0) {
							this.$common.showMsg(res.msg)
							this.$emit("afterDelete", this.orderInfo.id)
						}
					})
				})
			},
			handleRefund() {
				uni.navigateTo({
					url: `/pages/shop/orderRefund?orderId=${this.orderInfo.id}&orderSn=${this.orderInfo.sn}&payMoney=${this.orderInfo.payMoney}`
				})
			},
			showInfo() {
				uni.navigateTo({
					url:'/pages/shop/orderInfo?orderId=' + this.orderInfo.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 20rpx;
					color: #bbbbbb;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;
				width: 200rpx ;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				flex: 1;
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.price {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			font-size: 24rpx;
			.total-price {
				font-size: 28rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				margin-left: 30rpx;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

</style>
